<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="wap-font-scale" content="no" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <script src="./js/rem_count.js"></script>
    <title>关怀记录盒</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css//redMain.css">
    <link rel="stylesheet" href="./css/pop.css">
</head>
<body>
    <div id="redMain">
        <p class="toast"></p>
        <div class="topBg"></div>
        <div class="detailBox">
            <div class="topBtn">
                <div class="btn leftBtn on">我收到的关怀包</div>
                <div class="btn rightBtn">我送出的关怀包</div>
            </div>
            <div class="detailBlock getRed">
                <div class="getItem item">
                    <div>收到话费<span>10元</span> </div>
                    <div>赠送号码：13897207914</div >
                    <div>收到时间：2020-1-20</div>
                    <div>关怀短信：给家人</div>
                </div>
                <div class="getItem item tips">
                    <div>收到定向流量包 <span>20GB</span> </div>
                    <div>赠送号码：13897207914</div >
                    <div>收到时间：2020-1-20</div>
                    <div>关怀短信：给家人</div>
                    <div class="tipsIcon">免流范围？</div>
                </div>
                <div class="getItem item">
                    <div>收到话费<span>10元</span> </div>
                    <div>赠送号码：13897207914</div >
                    <div>收到时间：2020-1-20</div>
                    <div>关怀短信：给家人</div>
                </div>

            </div>
            <div class="detailBlock sendRed hide">
                <div class="sendRed item">
                    <div>赠送话费 <span>20.20元</span></div>
                    <div>受赠号码：13897207914</div >
                    <div>赠送时间：2020-1-20</div>
                    <div>关怀短信：给家人</div>
                    <div class="redBtn">告诉TA</div>
                </div>
                <div class="sendRed item">
                    <div>赠送定向流量包 <span>20GB</span> </div>
                    <div>受赠号码：13897207914</div >
                    <div>赠送时间：2020-1-20</div>
                    <div>关怀短信：给家人</div>
                    <div class="redBtn">告诉TA</div>
                </div>
                <div class="sendRed item">
                    <div>赠送定向流量包 <span>20GB</span> </div>
                    <div>赠送状态: 未赠出</div >
                    <div>订购时间：2020-1-20</div>
                    <div>关怀短信：<span class="sendName">给家人</span> </div>
                    <div class="redBtn toGive" onclick="toGive()">重新赠送</div>
                </div>
            </div>
        </div>
        <!-- 弹窗 -->
        <div class="pop" >
            <!-- 介绍 -->
            <div class="intPop popContent">
                <img src="./images/close.png" class="close" onclick="closePop()" alt="">
                <h3 class="title">定向流量包使用说明</h3>
                <div class="popDetail">
           
                    <p>【快手】</p>
                    <p>客户端需要升级到安卓andriod5.10.1及以上、iOS 5.10.2.716及以上。中国移动2G/3G/4G网络下，访问快手APP中的直播及短视频内容，但不包括以下内容：</p>
                    <p>（1）客户端内上传与图片、标题/评论/消息/私信等文本信息加载、直播中礼物素材加载、第三方网页浏览产生的流量。</p>
                    <p>（2）手机号码处于国际或港澳台地区漫游状态下产生的流量。</p>
                    <p>（3）利用手机设置代理服务器或VPN等方式，访问APP所产生的流量。</p>
                    <p>（4）用无线上网卡、平板电脑、CPE、MIFI等非手机设备使用产生的流量。</p>
                    <p>（5）手机作为热点使用产生的流量。</p>
                    <p>（6）使用CMWAP接入点方式，访问APP所产生的流量。</p>
                    <p>【抖音】</p>
                    <p>抖音短视频、今日头条客户端需要升级到最新版本， APP中第三方广告、弹幕、直播类视频上传、在线观看／下载／缓存第三方视频所产生的流量不包含在内。</p>
                    <p>【爱奇艺】</p>
                    <p>中国移动2G／3G／4G网络下，访问爱奇艺手机客户端（V96.5及以上版本）中的特定视频内容。但不包括以下内容：</p>
                    <p>（1）手机客户端内播放、下载第三方视频，浏览H5页面及播放、下载H5页面内视频;阅读小说、漫画等内容。</p>
                    <p>（2）使用腾讯视频手机客户端下载/缓存视频所产生的流量。</p>
                    <p>【优酷】</p>
                    <p>中国移动2G／3G／4G网络下，访问优酷视频手机客户端中的特定视频内容。但不包括以下内容：</p>
                    <p>（1）客户端启动、登录及客户端内的图片、文字、视频内插播广告、弹幕、第三方广告、主播类视频、在线观看／下载／缓存第三方视频等。</p>
                    <p>其他说明：</p>
                    <p>（2）土豆视频（IOS6.5.2或安卓6.5.1及之后版本）的视频内容。</p>
                    <p>（3）使用优酷视频手机客户端下载/缓存视频所产生的流量。</p>
                    <p>【腾讯】</p>
                    <p>中国移动2G／3G／4G网络下，访问腾讯视频手机客户端（5.6.2版本及其以上版本）中的特定视频内容。但不包括以下内容：</p>
                    <p>（1）客户端启动、登录及客户端内的图片、文字、视频内插播广告、弹幕、第三方广告、主播类视频、在线观看／下载／缓存第三方视频等。</p>
                    <p>（2）使用腾讯视频手机客户端下载/缓存视频所产生的流量。</p>
                </div>
            </div>
            <!-- 重新赠送 -->
            <div class="toGivePop popContent" >
                
                <!-- <div class="firstDetail">
                    <div class="firstTitle">请输入您要赠送的手机号码</div>
                    <div class="firstName">赠送产品：<span>20GB定向流量包</span></div>
                    <input type="text" class="telVal"  placeholder="请输入正确的青海移动号码">
                    <div class="sendMsg">
                        <label for="">送给</label>
                        <select name="" id="sel" onchange="doSome();">
                            <option value="0">家人</option>
                            <option value="1">朋友</option>
                            <option value="2">家人</option>
                            <option value="3">家人</option>
                        </select>
                    </div>
                    <div class="detailMsg">
                        <div class="topMsg">短信祝福：</div>
                        <div class="botMsg">佳节庆团圆,短信一条来连线;健康吉祥送身边;八戒搬来如意饼,佳节庆团圆,短信一条来连线;健康吉祥送身边;八戒搬来如意饼。</div>
                    </div>
                    <div class="surePay" onclick="surePay()">确认赠送</div>
                </div> -->
                <!-- <div class="paySuccess">
                    <div class="successTitle">赠送成功！</div>
                    <div class="successDetail">您已成功赠送20GB定向流量包，并且已将您选取的祝福短信发送给TA。</div>
                    <div class="successBtn">告诉TA</div>
                </div> -->
                <!-- <div class="falsePay" >
                    <div>支付失败！</div>
                    <div class="tips">详询10086！</div>
                </div> -->
            </div>
        </div>
    </div>
</body>
<script src="./js/jquery-3.3.1.min.js"></script>
<script src="./js/data.js"></script>
<script src="./js/index.js"></script>
<script>
    var isPay = true;
    var  indexSel = 0;
    //点击送出
    $(".topBtn .rightBtn").click(function(){
   
        $(".getRed").addClass("hide");
        $(".sendRed").removeClass('hide')
    })
    //点击收到
    $(".topBtn .leftBtn").click(function(){

        $(".getRed").removeClass("hide");
        $(".sendRed").addClass('hide')
    })
    $(".topBtn .btn").click(function(){
        $(this).addClass('on').siblings().removeClass('on');
    })
    //点击免流范围
    $(".tipsIcon").click(function(){
        $(".pop, .intPop").show()
    })
    //点击关闭
    //点击关闭
    window.closePop = function(){
        $(".pop, .popContent").hide()
    }


    
    //重新赠送
    function toGive(){
        $(".pop,.toGivePop").show();
        console.log(indexSel)
        $(".toGivePop").html(`
            <img src="./images/close.png" class="close" onclick="closePop()" alt="">
            <div class="firstDetail">
                <div class="firstTitle">请输入您要赠送的手机号码</div>
                <div class="firstName">赠送产品：<span>20GB定向流量包</span></div>
                <input type="text" onclick="sr(this);" onblur="nosr(this);" class="telVal" placeholder="请输入正确的青海移动号码">
                <div class="sendMsg">
                    <label for="">送给</label>
                    <select name="" id="sel" onchange="doSome();">
                        <option value="0">家人</option>
                        <option value="1">父母</option>
                        <option value="2">朋友</option>
                        <option value="3">爱人</option>
                        <option value="4">孩子</option>
                        <option value="5">同事</option>
                    </select>
                </div>
                <div class="detailMsg">
                    <div class="topMsg">关怀短信:</div>
                    <div class="botMsg">${data7[indexSel].msg}</div>
                </div>
                <div class="surePay" onclick="surePay()">确认赠送</div>
            </div>
        `)
    }

    //确认支付
    window.surePay = function(){
        var telVal = $(".telVal").val();
        var reg = /(1[3-9]\d{9}$)/;
        console.log(telVal)
        if(!telVal){
            animation("请输入手机号码")
            return false
        }
        if (!reg.test(telVal)){
            animation("请输入正确格式的手机号码！");
            return false;
        }
        if(isPay){
            $(".toGivePop").html(`
            <img src="./images/close.png" class="close" alt="" onclick="closePop()">
            <div class="paySuccess">
                <div class="successTitle">赠送成功！</div>
                <div class="successDetail">您已成功赠送20GB定向流量包，并且已将您选取的祝福短信发送给TA。</div>
                <div class="successBtn" onclick="goTo()">告诉TA</div>
            </div>
            `)
        }else{
            $(".toGivePop").html(`
            <img src="./images/close.png" class="close" alt="" onclick="closePop()">
            <div class="falsePay" >
                <div>支付失败！</div>
                <div class="tips">详询10086！</div>
            </div>
            `)
        }
    }
        //告诉TA
    window.goTo = function(){
        $(".pop, .popContent").hide()
    }
    var timer1;
    window.sr = function (obj) {
        timer1 = setInterval(function() {
            obj.scrollIntoView(false);
        }, 0);
    }
   window.nosr = function (obj) {
        clearInterval(timer1);
    }
            //二次赠送弹窗祝福下标语
    window.doSome = function (){
        console.log($("#sel option:selected").val())
        indexSel = $("#sel option:selected").val();
        $(".botMsg").html(`
        ${data7[indexSel].msg}
        `)
    }
</script>
</html>